<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabs with JSON Requests</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f9;
        }
        header {
            background-color: #4CAF50;
            color: white;
            padding: 2.5rem 3rem; /* Increased padding for a higher header */
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        header h1 {
            margin: 0;
            font-size: 1.75rem;
        }
        header h1 a {
            text-decoration: none;
            color: white;
        }
        header nav {
            display: flex;
            gap: 1.5rem;
        }
        header nav a {
            color: white;
            text-decoration: none;
            font-size: 1.1rem;
            transition: color 0.3s;
        }

        header nav a:hover {
            color: #d9fbe4;
        }
        .container {
            max-width: 1200px;
            margin: 5rem auto 2rem; /* Adjust top margin to accommodate higher header */
            padding: 0 2rem;
        }
        .tabs {
            display: flex;
            cursor: pointer;
            margin-bottom: 1rem;
            border-bottom: 2px solid #4CAF50;
        }
        .tab {
            flex: 1;
            padding: 1rem;
            text-align: center;
            background: #e8e8e8;
            border: 1px solid #ddd;
            border-bottom: none;
            margin-right: -1px;
            transition: background 0.3s;
            border-radius: 5px 5px 0 0;
        }
        .tab:hover {
            background: #ddd;
        }
        .active-tab {
            background: white;
            border-bottom: 2px solid #4CAF50;
            font-weight: bold;
        }
        .tab-content {
            background: white;
            padding: 1.5rem;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-top: -1px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 0.75rem 1.5rem;
            font-size: 1rem;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #45a049;
        }
        .data {
            margin-top: 1.5rem;
            padding: 1rem;
            background-color: #f1f1f1;
            border-radius: 5px;
        }
        form {
            margin-bottom: 1.5rem;
            padding: 1.5rem;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .form-group {
            margin-bottom: 1rem;
        }
        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: bold;
        }
        .form-group input, .form-group textarea {
            width: 100%;
            padding: 0.75rem;
            border-radius: 5px;
            border: 1px solid #ddd;
            font-size: 1rem;
        }
        .form-group input[type="date"] {
            height: 2.5rem;
        }
        .form-group input[type="number"] {
            height: 2.5rem;
        }
        .form-group textarea {
            height: 150px;
            resize: vertical;
        }
        .form-actions {
            display: flex;
            justify-content: flex-end;
        }
        .error-message {
            color: red;
            font-size: 0.875rem;
            margin-top: 1rem;
        }
    </style>
</head>
<body>
    <header>
        <h1><a href="/">般般复盘</a></h1>
        <nav>
            <a href="/">Home</a>
        </nav>
    </header>
    <div class="container">
        <div class="tabs">
            <div class="tab active-tab" data-tab="tab1">持久化数据</div>
            <div class="tab" data-tab="tab2">Tab 2</div>
            <div class="tab" data-tab="tab3">Tab 3</div>
        </div>
        <div id="tab1-content" class="tab-content">
            <div id="updateDiv">
                上次更新时间：<span id="updateTime"></span>
            </div>
            <form id="json-form">
                <div class="form-group">
                    <label for="date-input">日期:</label>
                    <input type="date" id="date-input" pattern="\d{4}\d{2}\d{2}">
                </div>
                <div class="form-group">
                    <label for="number-input">Number:</label>
                    <input type="number" id="number-input" step="1">
                </div>
                <div class="form-group">
                    <label for="float-input">Float Number:</label>
                    <input type="number" id="float-input" step="any">
                </div>
                <div class="form-actions">
                    <button type="submit">Submit JSON</button>
                </div>
                <div id="form-errors" class="error-message"></div>
            </form>
            <div id="data1" class="data"></div>
        </div>
        <div id="tab2-content" class="tab-content" style="display: none;">
            <button id="fetch-tab2-data">Fetch Tab 2 Data</button>
            <div id="data2" class="data"></div>
        </div>
        <div id="tab3-content" class="tab-content" style="display: none;">
            <button id="fetch-tab3-data">Fetch Tab 3 Data</button>
            <div id="data3" class="data"></div>
        </div>
    </div>

    <script>
        document.querySelectorAll('.tab').forEach(tab => {
            tab.addEventListener('click', function() {
                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active-tab'));
                document.querySelectorAll('.tab-content').forEach(tc => tc.style.display = 'none');

                this.classList.add('active-tab');
                document.getElementById(this.getAttribute('data-tab') + '-content').style.display = 'block';
            });
        });

        document.getElementById("updateTime").addEventListener('change', function (){
            const updateDiv = document.getElementById("updateDiv");
            const updateTime = document.getElementById("updateTime");
            if(updateTime.innerText == '') updateDiv.style.display = 'none';
            else updateDiv.style.display = '';
        });

        document.getElementById('json-form').addEventListener('submit', function(event) {
            event.preventDefault();
            const dateInput = document.getElementById('date-input').value;
            const numberInput = document.getElementById('number-input').value;
            const floatInput = document.getElementById('float-input').value;
            const jsonInput = document.getElementById('json-input').value;

            const errors = [];
            let isValid = true;

            // Validate JSON
            try {
                JSON.parse(jsonInput);
            } catch (error) {
                errors.push('Invalid JSON format.');
                isValid = false;
            }

            // Validate Number Input
            if (numberInput !== '' && (isNaN(numberInput) || !Number.isInteger(Number(numberInput)))) {
                errors.push('Number input must be a valid integer.');
                isValid = false;
            }

            // Validate Float Input
            if (floatInput !== '' && isNaN(floatInput)) {
                errors.push('Float number input must be a valid number.');
                isValid = false;
            }

            // If valid, show data, else show errors
            if (isValid) {
                const result = {
                    date: dateInput || null,
                    number: numberInput ? parseInt(numberInput, 10) : null,
                    float: floatInput ? parseFloat(floatInput) : null,
                    json: JSON.parse(jsonInput)
                };
                document.getElementById('data1').textContent = `Submitted Data: ${JSON.stringify(result, null, 2)}`;
                document.getElementById('form-errors').textContent = ''; // Clear errors
            } else {
                document.getElementById('data1').textContent = '';
                document.getElementById('form-errors').innerHTML = errors.join('<br>');
            }
        });

        document.getElementById('fetch-tab2-data').addEventListener('click', function() {
            fetch('/data2')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('data2').textContent = `Endpoint 2: ${data.message}`;
                })
                .catch(error => console.error('Error fetching data from /data2:', error));
        });

        document.getElementById('fetch-tab3-data').addEventListener('click', function() {
            fetch('/data3')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('data3').textContent = `Endpoint 3: ${data.message}`;
                })
                .catch(error => console.error('Error fetching data from /data3:', error));
        });
    </script>
</body>
</html>
